<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Register</title>
<style type="text/css">
#main {
    margin: 0 auto;
    border: 1px green solid;
    width: 800px;
}

.row {
    border-bottom: 1px red dotted;
    padding: 10px 0px;
}

.lspan {
    font-weight: bold;
    width: 150px;
    display: inline-block;
    margin-left: 10px;
}
</style>
<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
<script type="text/javascript">
var appJson = "application/json";
var appForm = "application/x-www-form-urlencoded";

function registerHandler() {
	//
	// loginName, password, email
	// requried to validate again when clicking on the register button
	
	var loginName = $('#loginName').val();
	var password = $('#password').val();
	var email = $('#email').val();
	var vcode = $('#vcode').val();
	
	var userinfo = {
            "loginName" : loginName,
            "userPassword" : password,
            "userEmail" : email,
            "vcode" : vcode
    };
    
    $.ajax({
        url: '/user/register',
        type: 'POST',
        contentType: appJson,
        dataType: 'json',
        data: JSON.stringify(userinfo),
        beforeSend : function(req) {

        },
         success:function(data){
        	 var mymsg = data.data ? data.data : data.msg;
        	 
        	 $('#msgs').html('<span style="color:green">'+ mymsg+ '</span>')
         },
         error:function(data){
                alert("Fail");
         }
    });
}

var countdown=60;
var timeoutId = null;
function settime(val) {
	
    if (countdown == 0) {
        val.css("color", "#000");
        val.html("Validate Email");
       
        countdown = 60;
        window.clearTimeout(timeoutId)
        
    } else {
    	val.css("color", "#aaa");
        val.html("Validate Email(" + countdown + " s)");
        countdown--;
        timeoutId = setTimeout(function() {
            settime(val)
        },1000)
    }
}

function emailValidationHandler() {
	if(countdown < 60) {
		return;
	}
    var email = $('#email').val();
    if((email == null || email == '')) {
        alert("Email can not be empty!")
        return;
    }
    
    var reg = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
    if(!reg.test(email)){
    	alert("Email format is wrong!")
        return;
    }
    
    settime($('#validateEmailLink'));

    $.ajax({
        url: '/user/email',
        type: 'POST',
        contentType: appForm,
        dataType: 'json',
        data: {email: email},
        beforeSend : function(req) {

        },
         success:function(data){
            $('#msgs').html('<span style="color:green">The email is sent, please check validation code from your email.</span>')
         },
         error:function(data){
            console.log(data)
         }
    });
}

</script>
</head>
<body>
<div id="main">
<h1 align="center">Register</h1>
<form action="/user/register">
<div id="messages" class="msg">
    <div id="msgs" style="margin-left: 10px">
     
    </div>
    
</div>
<div id="row" class="row">
    <span id="lspan" class="lspan">
        Login Name: 
    </span>
    <span id="cspan">
        <input type="text" name="loginName" id="loginName"/>
    </span>
</div>

<div id="row1" class="row">
    <span id="lspan" class="lspan">
        Password: 
    </span>
    <span id="cspan">
        <input type="password" name="password" id="password"/>
    </span>
</div>

<div id="row2" class="row">
    <span id="lspan" class="lspan">
        Email: 
    </span>
    <span id="cspan">
        <input type="text" name="email" id="email"/>
        <a id="validateEmailLink" href="#" onclick="emailValidationHandler();">Validate Email</a>
    </span>
</div>

<div id="row3" class="row">
    <span id="lspan" class="lspan">
        Validation Code: 
    </span>
    <span id="cspan">
        <input type="text" name="vcode" id="vcode"/>
    </span>
</div>

<div id="row3" class="row">
    <span style="margin-left: 10px">
     <button onclick="registerHandler();return false;">Register</button>
    </span>
    
</div>


</form>
</div>
</body>
</html>